<template>
  <layout title="">
    <p class="title">
      <span>公示编号：{{currentPub.pub_id}}</span>
      <span>发布机构: {{currentPub.s_a_nam_all}}</span>
      <a-button type="link" class="print-public" v-print="{ id: '#public-detail' }">[打印公示审批表]</a-button>
    </p>
    <!-- 产品列表 -->
    <a-table
      :dataSource="tableData"
      :columns="tableColumns"
      :rowKey="record => record.pub_num"
      :customRow="customTableRow"
      :pagination="false"
      :loading="tableLoading"
      size="large"
      :scroll="{
        x: true
      }"
      bordered
    >
      <template
        slot="pub_ck_state"
        slot-scope="row"
      >
        <template v-if="row.editable">
          <a-select
            style="width: 110px"
            v-model="row.pub_ck_state"
            placeholder="请选择公示结果"
            :options="publishStatus.filter(item => ![publishStatusEnum.PUBLIC_WAIT, publishStatusEnum.PUBLIC_ING].includes(item.value))"
          >
          </a-select>
        </template>
        <template v-else>
          {{getLabel(row.pub_ck_state, [], 'pub_ck_state') === '0' ? '' : getLabel(row.pub_ck_state, [], 'pub_ck_state')}}
        </template>
      </template>
      
      <template
        v-for="col in ['pub_ck_tel', 'pub_ck_u', 'pub_ck_readme']"
        :slot="col"
        slot-scope="row"
      >
        <template v-if="row.editable">
          <a-input v-model="row[col]"></a-input>
        </template>
        <template v-else>
          {{row[col]}}
        </template>
      </template>

      <template
        slot="pub_ck_start"
        slot-scope="row"
      >
        <template v-if="row.editable">
          <a-date-picker valueFormat="YYYY-MM-DD" placeholder="请选择开始日期" v-model="row.pub_ck_start"></a-date-picker>
        </template>
        <template v-else>
          {{row.pub_ck_start}}
        </template>
      </template>

      <template
        slot="pub_ck_end"
        slot-scope="row"
      >
        <template v-if="row.editable">
          <a-date-picker valueFormat="YYYY-MM-DD" placeholder="请选择结束日期" v-model="row.pub_ck_end"></a-date-picker>
        </template>
        <template v-else>
          {{row.pub_ck_end}}
        </template>
      </template>

      <template
        slot="action"
        slot-scope="row, record, index"
      >
        <!-- <a-popconfirm
          title="您确认当前直接选择公示通过?"
          ok-text="确认"
          cancel-text="取消"
          @confirm="handlerEdit(row, '1')"
        >
          <a-button
            class="action-button"
            type="link"
            size="small"
            :disabled="isPrevConfirm(index + 1) || hasReject || (currentUserArea.s_a_id.length > row.areaLen)"
            v-if="row.pub_ck_state !== publishStatusEnum.PUBLIC_SUCCESS"
          >[公示通过]</a-button>
        </a-popconfirm> -->

        <a-popconfirm
          title="您确认当前直接选择撤销公示?"
          ok-text="确认"
          cancel-text="取消"
          @confirm="handlerEdit(row, '2')"
        >
          <a-button
            class="action-button"
            type="link"
            size="small"
            :disabled="isPrevConfirm(index + 1) || hasReject || (currentUserArea.s_a_id.length > row.areaLen)"
          >[撤销公示]</a-button>
        </a-popconfirm>
        <!-- v-if="row.pub_ck_state !== publishStatusEnum.PUBLIC_FAIL" -->


        <a-button
          class="action-button"
          type="link"
          size="small"
          :disabled="isPrevConfirm(index + 1) || hasReject || (currentUserArea.s_a_id.length > row.areaLen)"
          @click="handlerEdit(row)"
        >[{{ row.editable ? '保存' : '修改' }}]</a-button>
      </template>
    </a-table>
  </layout>
</template>

<script lang="ts">
import { Mixins, Component, Watch, Vue, Prop } from 'vue-property-decorator'
import EventsMixin from '@/mixin/events'
import { TableMixin, AuthMixin } from '@/mixin'

import { TableLayout } from '@/layouts'
import CustomForm from '@/components/src/Form'
import { publishServices, IPublish } from '@/common/services/publish'
import { publishStatus, publishStatusEnum } from '@/common/enum'
import { userModule } from '@/store/modules/user'

@Component({
  components: {
    Layout: TableLayout,
    CustomForm,
  }
})
export default class AdminList extends Mixins(
  EventsMixin,
  TableMixin,
  AuthMixin
) {
  @Prop({
    type: Object
  })
  public currentPub!: IPublish

  get isLarge() {
    return userModule.isLarge
  }

  get currentUserArea() {
    return userModule.currentUserArea
  }

  public commonParams = {
    s_a_id: ''
  }

  // 产品列表搜索条件
  public tableSearch = {
    pub_state: ''
  }

  // 自定义mode
  public customMode = 'add'

  get publishStatus() {
    return publishStatus
  }

  get publishStatusEnum() {
    return publishStatusEnum
  }

  get hasReject() {
    return [
      this.currentPub.pub_ck_state3,
      this.currentPub.pub_ck_state2,
      this.currentPub.pub_ck_state1,
    ].includes(publishStatusEnum.PUBLIC_CANCEL)
    || ([
      this.currentPub.pub_ck_state3,
      this.currentPub.pub_ck_state2,
      this.currentPub.pub_ck_state1,
    ].every(_ => _ === publishStatusEnum.PUBLIC_SUCCESS) && this.currentUserArea.s_a_id.length > 6)
  }

  // 判断上一级未确认不能点击下一级
  public isPrevConfirm(index: number) {
    if (index === 1) return false
    // @ts-ignore
    return this.currentPub['pub_ck_state' + (index - 1)] !== publishStatusEnum.PUBLIC_SUCCESS
  }

  // 产品列表表格信息
  public columns: ITable.IColumn[] = [
    {
      title: '公示内容',
      dataIndex: 'pub_num',
      key: 'pub_num',
      width: 140,
    },
    // {
    //   title: '公示结果',
    //   key: 'pub_ck_state',
    //   scopedSlots: { customRender: 'pub_ck_state' },
    //   width: 130,
    //   form: {
    //     dict: this.publishStatus.filter(item => item.value !== publishStatusEnum.PUBLIC_WAIT)
    //   }
    // },
    {
      title: '公示地点',
      dataIndex: 'pub_ck_area',
      // scopedSlots: { customRender: 'pub_ck_area' },
      key: 'pub_ck_area',
      width: 200,
    },
    {
      title: '联系电话',
      scopedSlots: { customRender: 'pub_ck_tel' },
      key: 'pub_ck_tel',
      width: 130,
    },
    {
      title: '经办人',
      key: 'pub_ck_u',
      scopedSlots: { customRender: 'pub_ck_u' },
      width: 100,
    },
    {
      title: '开始日期',
      scopedSlots: { customRender: 'pub_ck_start' },
      key: 'pub_ck_start',
      width: 160
    },
    {
      title: '结束日期',
      scopedSlots: { customRender: 'pub_ck_end' },
      key: 'pub_ck_end',
      width: 160
    },
    // {
    //   title: '未通过原因',
    //   scopedSlots: { customRender: 'pub_ck_readme' },
    //   key: 'pub_ck_readme',
    //   width: 200
    // },
    {
      title: '操作',
      key: 'action',
      width: 120,
      fixed: 'right',
      scopedSlots: { customRender: 'action' }
    }
    // {
    //   title: '照片数量',
    //   dataIndex: 'readme',
    //   key: 'readme',
    //   form: {
    //     type: 'a-textarea',
    //     placeholder: ''
    //   },
    //   width: 200
    // }
  ]

  public tableApi = {
    // list: publishServices.getPublishList,
    // add: publishServices.updatePublish,
    // edit: publishServices.updatePublish
    // del: userServices.deleteAdmin,
    // imageUpload: 'uploadStoreImage',
    // imageRemove: 'delStoreImage'
  }

  @Watch('currentPub', { immediate: true, deep: true })
  public handlerCurrentAreaIdChange() {
    this.getData()
  }

  public mounted() {
  }

  public async getData() {
    // 可修改行政地区长度
    const areaLens = [12, 9, 6]

    const titles = [
      '一次公示账户面积',
      '二次公示补贴信息',
      '二次公示补贴信息2'
    ]

    // 格式化数据
    this.tableData = new Array(1).fill(null).map((key, index) => {
      const number = index + 1
      // @ts-ignore
      const data: Record<string, string> = this.currentPub
      // 1、公示申报信息（不含金额）
      // 2、公示补贴信息
      // 3、公示补贴信息
      return {
        id: number,
        // pub_num: `第${number}次公示`,
        pub_num: titles[index],
        areaLen: areaLens[index],
        pub_ck_area: data['pub_ck_area' + number],
        pub_ck_tel: data['pub_ck_tel' + number],
        pub_ck_u: data['pub_ck_u' + number],
        pub_ck_start: data['pub_ck_start' + number],
        pub_ck_end: data['pub_ck_end' + number],
        pub_ck_state: data['pub_ck_state' + number] === '0' ? undefined : data['pub_ck_state' + number],
        pub_ck_readme: data['pub_ck_readme' + number],
        editable: false
      }
    })
  }

  public handlerEdit(row: Record<string, string | boolean>, state: string) {
    if (row.editable || typeof state !== 'undefined') {
      const submit = () => {
        const currentState = state || row.pub_ck_state
        // 提交编辑接口
        const params = {
          ['pub_ck_tel' + row.id]: row.pub_ck_tel,
          ['pub_ck_u' + row.id]: row.pub_ck_u,
          ['pub_ck_start' + row.id]: row.pub_ck_start,
          ['pub_ck_end' + row.id]: row.pub_ck_end,
          ['pub_ck_state' + row.id]: currentState,
          ['pub_ck_readme' + row.id]: row.pub_ck_readme
        }
        this.tableLoading = true
        publishServices.updatePublish({
          pub_id: this.currentPub.pub_id,
          s_a_id: this.currentPub.s_a_id,
          ...params
        }).then(() => {
          row.editable = !row.editable
          // @ts-ignore
          // this.currentPub['pub_ck_state' + row.id] = currentState;
          this.currentPub = {
            ...this.currentPub,
            ...params
          }
          this.$nextTick(() => {
            this.getData();
          })
          this.$message.success('更新成功')
        }).finally(() => {
          this.tableLoading = false
          // this.tableData = [...this.tableData]
        })
      }
      if (state === publishStatusEnum.PUBLIC_CANCEL) {
        this.$confirm({
          title: "提示",
          content: "当前公示状态为撤销公示，保存成功后整个公示将被撤回，请确认？",
          onOk: () => {
            submit()
          }
        })
      } else {
        submit()
      }
    } else {
      row.editable = !row.editable
      this.tableData = [...this.tableData]
    }
  }
}
</script>

<style scoped lang="less">
.title {
  line-height: 30px;
  text-indent: 8px;
  span:nth-child(2) {
    margin: 0 10px;
  }
}
</style>
